<template>
  <div class="underway">
    <div class="top">
      <div class="top-left">
        <img class="login" src="./icons/flash.png" alt="">
        <span>好货有限 赶紧下单呦</span>
      </div>
      <div class="top-right">
        <span>距结束</span>
        <div class="time">
          <!--<span class="num" v-for="(val, key) in time" :key="key">{{val}}</span>-->
          <span class="nums">14</span>
          <span class="num">: </span>
          <span class="nums">30</span>
          <span class="num">:</span>
          <span class="nums">31</span>
        </div>
      </div>
    </div>
    <div class="center" v-for="(val, key) in center" :key="key">
      <img class="center-left" :src="val.img" alt="">
      <div class="center-right">
        <p>{{val.sock}}</p>
        <div class="right">
          <span>{{val.comfort}}</span>
          <span>|</span>
          <span>{{val.seasons}}</span>
          <span>|</span>
          <span>{{val.deodorize}}</span>
        </div>
        <div class="post">
          <span>{{val.post}}</span>
        </div>
        <div class="price">
          <span class="moneys"><span>￥</span>{{val.moneys}}</span>
          <span class="money">￥{{val.money}}</span>
        </div>
        <div class="grad">
          <span>{{val.grad}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'underway',
  data () {
    return {
      center: [
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'}
      ]
    }
  }
}
</script>

<style scoped lang="scss">
  .underway{
    position: absolute;
    top: 370px;
    width: 1165px;
    overflow: hidden;
    margin-left: 42px;
    .top, .center{
      background: #fff;
      border-radius: 40px;
      margin-bottom: 40px;
    }
    .top{
      height: 200px;
      justify-content: space-around;
      align-items: center;
      display: flex;
      span{
        font-size: 45px;
      }
      .top-left{
        width: 520px;
        display: flex;
        justify-content: space-around;
        .login{
          width: 60px;
          height: 60px;
        }
      }
      .top-right{
        width: 480px;
        display: flex;
        justify-content: space-around;
        .time{
          height: 66px;
          display: flex;
          .nums:nth-child(5){
            background: red;
          }
          .nums{
            width: 66px;
            line-height: 66px;
            background: #4d4d4d;
            font-size: 32px;
            text-align: center;
            display: inline-block;
            color: #fff;
            border-radius: 15px;
          }
          .num{
            width: 40px;
            text-align: center;
          }
        }
      }
    }
    .center{
      height: 490px;
      align-items: center;
      justify-content: space-around;
      display: flex;
      .center-left{
        width: 430px;
        height: 430px;
      }
      .center-right{
        width: 605px;
        height: 430px;
        position: relative;
        p{
          font-size: 43px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
        .right{
          height: 40px;
          span{
            font-size: 34px;
            color: #9a9a9a;
          }
        }
        .post{
          background: #eb4f3f;
          width: 125px;
          line-height: 60px;
          color: #fff;
          font-size: 30px;
          margin-top: 80px;
          text-align: center;
          border-radius: 40px;
        }
        .price{
          margin-top: 50px;
          .moneys{
            font-size: 50px;
            color: #eb4f3f;
            span{
              font-size: 30px;
            }
          }
          .money{
            font-size: 30px;
            text-decoration: line-through;
            color: #cccccc;
          }
        }
        .grad{
          position: absolute;
          right: 0;
          bottom: 0;
          width: 190px;
          line-height: 85px;
          background: #ed7655;
          text-align: center;
          border-radius: 40px;
          span{
            font-size: 40px;
            color: #fff;
          }
        }
      }
    }
  }
</style>
